<template>
    <!--    <el-form v-model="dialogVisible" width="80%" title="操作步骤" destroy-on-close center>-->
    <el-form width="80%" title="组成工序" >
        <template #default>
            <!-- 工具栏部分开始 -->
                        <el-row style="margin-top: 10px;">
                            <el-col :span="24">
                                <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        content="新增组成工序"
                                        placement="top-start"
                                >
                                    <el-button @click="toAddCompose" type="primary"><el-icon><Plus /></el-icon></el-button>
                                </el-tooltip>
                                <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary"><el-icon><EditPen /></el-icon></el-button>
                                <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                               @confirm="deleteBtnHandler" title="您确定要删除选中的工艺路线信息吗？">
                                    <template #reference>
                                        <el-button :disabled="deleteBtnDisabled" type="primary">
                                            <el-icon>
                                                <Minus/>
                                            </el-icon>
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </el-col>
                        </el-row>
            <!-- 工具栏部分结束 -->
            <!-- 列表部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-table ref="composeTable" @selection-change="handleSelectionChange" :data="composes" border :stripe="true" style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="orderNum" label="序号"  />
                        <el-table-column prop="processCode" label="工序编码"  />
                        <el-table-column prop="processName" label="工序名称"  />
                        <el-table-column prop="nextProcessName" label="下一道工序" >
                            <template #default="scope">
                                <span v-if="scope.row.nextProcessName == null">无</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="nextRelation" label="与下一道工序关系">
                            <template #default="scope">
                                <span v-if="scope.row.nextRelation == 1">S-to-S</span>
                                <span v-if="scope.row.nextRelation == 2">F-to-F</span>
                                <span v-if="scope.row.nextRelation == 3">S-to-F</span>
                                <span v-if="scope.row.nextRelation == 4">F-to-S</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="keyProcess" label="关键工序" >
                            <template #default="scope">
                                <el-tag type="success" v-if="scope.row.keyProcess == 1">是</el-tag>
                                <el-tag type="warning" v-else>否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="qualityConfirm" label="质检确认">
                            <template #default="scope">
                                <el-tag type="success" v-if="scope.row.qualityConfirm == 1">是</el-tag>
                                <el-tag type="warning" v-else>否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="prepareTime" label="准备时间" />
                        <el-table-column prop="waitTime" label="等待时间" />
                        <!-- 行工具栏 -->
                                <el-table-column fixed="right" width="140" label="操作">
                                    <template #default="scope">
                                        <el-button type="primary" @click="toEditCompose(scope.row.composeId)"  size="small">编辑</el-button>
                                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                                       @confirm="deleteCompose(scope.row.composeId)" title="您确定要删除这个组成工序？">
                                            <template #reference>
                                                <el-button type="danger"  size="small">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!-- 列表部分结束 -->
            <!-- 分页部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit" :total="total" />
                </el-col>
            </el-row>
            <!-- 分页部分结束 -->
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="20"></el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="closeWin">关闭</el-button>
                </el-col>
            </el-row>
        </template>
    </el-form>
    <ComposeAddWin :visible="composeAddWinDialogVisible"  :techniqueId="techniqueId" :processId="processId" @optionCompleted="addComposeOptionCompleted"/>
    <ComposeEditWin :visible="composeEditWinDialogVisible" :techniqueId="techniqueId" :composeId="composeId" @optionCompleted="editComposeOptionCompleted"/>
</template>

<script>
import {watch} from "vue";
import ComposeRequest from '../../../../api/compose.js';

import ComposeAddWin from '@/views/pro/craft/compose/compose-add-win.vue';
import ComposeEditWin from '@/views/pro/craft/compose/compose-edit-win.vue';


export default {
    props:["techniqueId"],// 属性
    emits:["optionCompleted"],// 暴漏的事件
    name: "compose.vue",
    components:{
        ComposeEditWin,
        ComposeAddWin
    },
    data(){//数据模型
        return{
            dialogVisible: false, // 弹窗标记
            queryCompose:{},// 绑定查询条件
            composes:[],// 存储组成工序
            total:0,// 总记录数
            limit:10,// 每页显示的记录
            currentPage:1,// 当前页码
            editBtnDisabled:true,// 编辑按钮是否禁用
            deleteBtnDisabled:true,// 删除按钮是否禁用
            currentStepType:undefined,
            techniqueId:this.techniqueId,
            // techniqueId:'2',
            processId:'1004',
            editProcessVisible:false,
            editProcessStepId:-1,
            composeId:'',
            composeAddWinDialogVisible:false, // 添加组成工序弹窗显示标记
            composeEditWinDialogVisible:false
        }
    },methods:{
        //向子组件传递工艺Id
        deleteCompose(composeId) {
            this.composeId = composeId;
            ComposeRequest.deleteCompose(composeId, res => {
                this.$message({
                    type: 'success',
                    message: '删除组成工序成功!'
                });
                this.loadComposes(this.techniqueId);
            });
        },
        deleteBtnHandler(){
            let selectionRows = this.$refs.composeTable.getSelectionRows();
            let composeIds = new Array();
            selectionRows.forEach(row => {
                composeIds.push(row.composeId);
            })
            ComposeRequest.deleteComposes(composeIds,res =>{
                this.$message({
                    type: 'success',
                    message: '删除步骤成功!'
                });
                this.loadComposes(this.techniqueId);
            });
        },
        editBtnHandler(){
            let selectionRows = this.$refs.composeTable.getSelectionRows()[0];
            if (selectionRows != undefined) {
                this.composeId = selectionRows.composeId;
                this.composeEditWinDialogVisible = true;
            }else{
                this.$message({
                    type: 'warning',
                    message: '请选择一条记录进行编辑!'
                });
            }
        },
        editComposeOptionCompleted(){
            this.composeEditWinDialogVisible = false;
            this.loadComposes(this.techniqueId);
        },
        /**
         * 添加字典项操作完成处理事件
         */
        addComposeOptionCompleted(){
            // 关闭弹窗
            this.composeAddWinDialogVisible = false;
            // 重新加载数据
            this.loadComposes(this.techniqueId);
        },
        /**
         * 翻页事件
         */
        pageChange(currentPage,currentLimit){

        },
        handleSelectionChange(){
            let selectionRows = this.$refs.composeTable.getSelectionRows();
            if (selectionRows.length == 0) {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = true;
            } else if (selectionRows.length == 1) {
                this.editBtnDisabled = false;
                this.deleteBtnDisabled = false;
            } else {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = false;
            }
        },
        /**
         * 行编辑按钮事件
         * @param composeId
         */
        toEditCompose(composeId){
            console.log("这里调用了编辑工序_______________")
            this.composeId = composeId;
            this.composeEditWinDialogVisible = true;
        },
        /**
         * 弹窗显示新增工艺组成项
         * 工具栏中的新增按钮事件
         */
        toAddCompose(){
            this.composeAddWinDialogVisible = true;
        },
        /**
         * 关闭当前的窗体
         */
        closeWin(){
            // 通知父窗体，操作完成
            this.$emit("optionCompleted");
        },
        /**
         * 加载组成工序列表
         */
        loadComposes(techniqueId){
            // 准备参数
            this.queryCompose.page = this.currentPage;
            this.queryCompose.limit = this.limit;
            if(techniqueId)
                this.queryCompose.techniqueId = techniqueId;
            ComposeRequest.loadCompose(this.queryCompose,res => {
                console.log(res)
                // 赋值
                this.composes = res.data.data;
                this.total = res.data.total;
            });
        }
    },mounted(props) {
        // this.loadComposes();
        console.log(this.techniqueId)
        this.loadComposes(this.techniqueId);
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
            if(this.dialogVisible){
                this.loadComposes(this.techniqueId);
            }
        });
        watch(()=>this.techniqueId,(newVal,oldVal)=>{
            console.log(this.techniqueId)
            this.currentStepType = newVal;
            if(this.dialogVisible){
                this.loadComposes(this.techniqueId);
            }
        });

    }
}
</script>

<style scoped>

</style>
<script setup>
</script>